<!--
 * @Author: 哈兰德
 * @Description: 单个图片上传组件，父组件可使用v-model绑定图片链接
-->
<template>
  <div class="uploader-wrapper" :class="{ noslot: !$slots.default }">
    <el-upload
      class="image-uploader"
      :action="action"
      :show-file-list="false"
      :on-error="uploadFail"
      :on-success="handleFileSuccess"
      :before-upload="beforeUploadHandler"
    >
      <slot>
        <img v-if="value" :src="value" class="image" />
        <i v-else class="el-icon-plus image-uploader-icon"></i>
      </slot>
    </el-upload>

    <div v-if="$slots.default && value" class="preview">
      <img :src="value" />
      <el-button v-if="isNeedDelete" style="margin-left: 10px" type="text" @click="deleteImg">
        {{ deleteBtnText || '删除' }}
      </el-button>
    </div>
  </div>
</template>

<script>
// import tool from '@/util/tool'
export default {
  name: 'ImageUpload',
  props: {
    value: {
      type: String,
      default: () => ''
    },
    size: {
      type: Number,
      default: () => 300
    },
    gifSize: {
      type: Number,
      default: () => 400
    },
    isNeedDelete: {
      type: Boolean,
      default: true,
      required: false
    },
    beforeUpload: {
      type: [Function, Boolean],
      default: false
    },
    deleteBtnText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      action: `${this.$URLS.MOS_API_HOST}/activity/uploadPicture?shiro_sid=${this.$route.query.shiro_sid}`
    }
  },
  computed: {
    beforeUploadHandler () {
      return this.beforeUpload || this.beforeFileUpload
    }
  },
  methods: {
    handleFileSuccess (res) {
      if (res?.data && res.flag === 'S') {
        this.$message({
          message: '上传图片成功',
          type: 'success'
        })
        this.$emit('input', res.data)
        this.$emit('on-success', res.data)
      } else {
        this.$message({
          message: '上传图片失败',
          type: 'error'
        })
      }
    },
    uploadFail () {
      this.$message.error('上传图片失败,请重试')
    },
    isImgType(file, type) {
      return file.type.includes(type)
    },
    isLimitSize (file, type) {
      return file.size / 1024 < (type === 'image' ? this.size : this.gifSize)
    },
    beforeFileUpload (file) {
      const isImage = this.isImgType(file, 'image/')
      const isGif = this.isImgType(file, 'gif')

      const isImageLimit = this.isLimitSize(file, 'image')
      const isGifLimit = this.isLimitSize(file, 'gif')

      if (!isImage) {
        this.$message.error('请上传图片!')
        return false
      }
      if (!isGif && !isImageLimit) {
        this.$message.error(`上传图片大小不能超过${this.size}KB!`)
        return false
      }
      if (isGif && !isGifLimit) {
        this.$message.error(`上传gif大小不能超过${this.gifSize}KB!`)
        return false
      }
      return true
    },
    deleteImg() {
      this.$emit('on-delete')
    }
  }
}
</script>

<style lang="less" scoped>
.uploader-wrapper {
  &.noslot {
    width: 100%;
    height: 100%;
    ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      height: 100%;
      width: 100%;
    }
    ::v-deep .el-upload:hover {
      border-color: #409eff;
    }
  }
  .preview {
    display: flex;
    align-items: center;
    img {
      width: 270px;
      max-height: 80px;
      box-shadow: #eee 3px 3px;
      // height: 95px;
    }
  }
}
.image-uploader {
  height: 100%;
  width: 100%;
  ::v-deep .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .image-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}
</style>
